<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>静态方法和实例方法说明</title>
    <script src="../../js/jquery-3.4.1.js"></script>
</head>
<body>

</body>
<script>
    class OneCalss {
        /*
        功能:
            声明js的class的静态方法.
        说明:
            1. 类的声明和java中的一样, 但是静态方法的声明不一样:
                - 静态方法的声明只需要声明static修饰符即可, 不需要function修饰符.
                - 调用通'过类名称.静态方法名称'调用.
         */
        static alertMessage(message) {
            console.log(message);
        }

        sayBay() {
            console.log("bye-bye");
        }

    }

    $(function () {
        OneCalss.alertMessage("你好");

        addingStaticMethodsToAClass();
        OneCalss.addStaticMethod();

        OneCalss.prototype.sayBay();

        const one = new OneCalss();
        addInstanceMethodToClass();

        //OneCalss.sayBay2(); //会报错, 不能通过类名称访问实例方法
        one.sayBay2();
        one.sayBay();
        //one.alertMessage("你好1"); //会报错, 不能通过实例对象访问静态方法
    });

    /**
     * 功能:
     *      给类手动添加一个静态方法.
     * 说明:
     *      在添加之后和普通的方法的调用方式是一样的.
     */
    function addingStaticMethodsToAClass() {
        OneCalss.addStaticMethod = function () {
            console.log("I`m add method.");
        }
    }

    /**
     * 功能:
     *      给class动态添加实例方法.
     * 说明:
     *      1. 成员方法的调用方式有两种:
     *          - 一种是: 将这个对象new出来, 然后通过'对象名称.实例方法名称'方式调用;
     *          - 另一种是: 通过'类名.prototype.实例方法名称'方式调用, 这种调用方式不需要创建对象.
     * 注意:
     *      1. 不能通过类名称访问实例方法; 否则会报错jquery-3.4.1.js:3852 Uncaught TypeError: one.alertMessage is not a function.
     *      2. 不能通过实例对象访问静态方法. 否则会报错jquery-3.4.1.js:3852 Uncaught TypeError: one.alertMessage is not a function.
     */
    function addInstanceMethodToClass() {
        OneCalss.prototype.sayBay2 = function () {
            console.log("bye-bye-2");
        }
    }
</script>
</html>